<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>京西商城</title>
	<link rel="stylesheet" href="style/base.css" type="text/css">
	<link rel="stylesheet" href="style/global.css" type="text/css">
	<link rel="stylesheet" href="style/header.css" type="text/css">
	<link rel="stylesheet" href="style/index.css" type="text/css">
	<link rel="stylesheet" href="style/bottomnav.css" type="text/css">
	<link rel="stylesheet" href="style/footer.css" type="text/css">

	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/header.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
</head>

<body>


	<!-- 头部 start -->
	<div class="header w1210 bc mt15">


		<div style="clear:both;"></div>

		<!-- 导航条部分 start -->
		<div class="nav w1210 bc mt10">
			<!--  商品分类部分 start-->
			<div class="category fl">
				<div class="cat_hd">
					<h2>全部商品分类</h2>
					<em></em>
				</div>

				<div class="cat_bd">

					<div class="cat item1">
						<h3><a href="">图像、音像、数字商品</a> <b></b></h3>
						<div class="cat_detail">
							<dl class="dl_1st">
								<dt><a href="">电子书</a></dt>
								<dd>
									<a href="">免费</a>
									<a href="">小说</a>
									<a href="">励志与成功</a>
									<a href="">婚恋/两性</a>
									<a href="">文学</a>
									<a href="">经管</a>
									<a href="">畅读VIP</a>
								</dd>
							</dl>

							<dl>
								<dt><a href="">数字音乐</a></dt>
								<dd>
									<a href="">通俗流行</a>
									<a href="">古典音乐</a>
									<a href="">摇滚说唱</a>
									<a href="">爵士蓝调</a>
									<a href="">乡村民谣</a>
									<a href="">有声读物</a>
								</dd>
							</dl>

							<dl>
								<dt><a href="">音像</a></dt>
								<dd>
									<a href="">音乐</a>
									<a href="">影视</a>
									<a href="">教育音像</a>
									<a href="">游戏</a>
								</dd>
							</dl>

							<dl>
								<dt><a href="">文艺</a></dt>
								<dd>
									<a href="">小说</a>
									<a href="">文学</a>
									<a href="">青春文学</a>
									<a href="">传纪</a>
									<a href="">艺术</a>
									<a href="">经管</a>
									<a href="">畅读VIP</a>
								</dd>
							</dl>

							<dl>
								<dt><a href="">人文社科</a></dt>
								<dd>
									<a href="">历史</a>
									<a href="">心理学</a>
									<a href="">政治/军事</a>
									<a href="">国学/古籍</a>
									<a href="">哲学/宗教</a>
									<a href="">社会科学</a>
								</dd>
							</dl>

							<dl>
								<dt><a href="">经管励志</a></dt>
								<dd>
									<a href="">经济</a>
									<a href="">金融与投资</a>
									<a href="">管理</a>
									<a href="">励志与成功</a>
								</dd>
							</dl>

							<dl>
								<dt><a href="">人文社科</a></dt>
								<dd>
									<a href="">历史</a>
									<a href="">心理学</a>
									<a href="">政治/军事</a>
									<a href="">国学/古籍</a>
									<a href="">哲学/宗教</a>
									<a href="">社会科学</a>
								</dd>
							</dl>

							<dl>
								<dt><a href="">生活</a></dt>
								<dd>
									<a href="">烹饪/美食</a>
									<a href="">时尚/美妆</a>
									<a href="">家居</a>
									<a href="">娱乐/休闲</a>
									<a href="">动漫/幽默</a>
									<a href="">体育/运动</a>
								</dd>
							</dl>

							<dl>
								<dt><a href="">科技</a></dt>
								<dd>
									<a href="">科普</a>
									<a href="">建筑</a>
									<a href="">IT</a>
									<a href="">医学</a>
									<a href="">工业技术</a>
									<a href="">电子/通信</a>
									<a href="">农林</a>
									<a href="">科学与自然</a>
								</dd>
							</dl>

						</div>
					</div>
				</div>

			</div>
			<!--  商品分类部分 end-->

		</div>
		<!-- 导航条部分 end -->
	</div>
	<!-- 头部 end-->
</body>

</html>
<script>
	// 根据数据 模仿京东的导航栏 实现效果
	// data 就是分类数据 data是数组 每一个元素是对象 表示一个一级分类
	// 每一个1级分类下 如果有children 就表示存在二级，二级又数数组 。。。
	var data = {
		"count": 13,
		"data": [{
				"id": 1,
				"cateName": "家用电器",
				"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f33903e1162959f500360a39896f2306.png?thumb=1&w=40&h=40&f=webp&q=90",
				"parentId": 0,
				"children": [{
						"id": 3,
						"cateName": "电视",
						"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90",
						"parentId": 1,
						"children": [{
								"id": 10,
								"cateName": "全屏电视",
								"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d3bace6e62cecb7901e306b05502535f.jpg?thumb=1&w=40&h=40",
								"parentId": 3
							},
							{
								"id": 11,
								"cateName": "教育电视",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d219d8b9c4a74eda4ae6c0222d194cd2.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 3
							},
							{
								"id": 12,
								"cateName": "4K超清",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1c0d83dd59a3dd91372d867864b35554.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 3
							}
						]
					},
					{
						"id": 4,
						"cateName": "空调",
						"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
						"parentId": 1,
						"children": [{
								"id": 13,
								"cateName": "中央空调",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/970c6b287eb89620f5ee8e2b347f6f3d.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 4
							},
							{
								"id": 14,
								"cateName": "变频空调",
								"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/39c8ccbebd08687bc6780373b7ef2a95.jpg?thumb=1&w=40&h=40",
								"parentId": 4
							},
							{
								"id": 15,
								"cateName": "一级能效",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f7f39b7ac49227fc59c3f2b2105d25d6.jpg?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 4
							}
						]
					},
					{
						"id": 8,
						"cateName": "洗衣机",
						"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab956ee82c24bdd83d21bc212aad3eb5.png?thumb=1&w=40&h=40&f=webp&q=90",
						"parentId": 1
					},
					{
						"id": 6,
						"cateName": "冰箱",
						"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=40&h=40&f=webp&q=90",
						"parentId": 1
					},
					{
						"id": 9,
						"cateName": "生活电器",
						"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b656495821144d92bd932d91eedcf659.png?thumb=1&w=40&h=40&f=webp&q=90",
						"parentId": 1
					}
				]
			},
			{
				"id": 16,
				"cateName": "电脑办公",
				"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d3bace6e62cecb7901e306b05502535f.jpg?thumb=1&w=40&h=40",
				"parentId": 0,
				"children": [{
						"id": 18,
						"cateName": "电脑整机",
						"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
						"parentId": 16,
						"children": [{
								"id": 19,
								"cateName": "笔记本",
								"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
								"parentId": 18
							},
							{
								"id": 20,
								"cateName": "游戏本",
								"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
								"parentId": 18
							},
							{
								"id": 21,
								"cateName": "平板电脑",
								"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
								"parentId": 18
							},
							{
								"id": 22,
								"cateName": "台式机",
								"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
								"parentId": 18
							}
						]
					},
					{
						"id": 23,
						"cateName": "电脑配件",
						"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
						"parentId": 16,
						"children": [{
								"id": 24,
								"cateName": "显示器",
								"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
								"parentId": 23
							},
							{
								"id": 25,
								"cateName": "CPU",
								"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
								"parentId": 23
							},
							{
								"id": 26,
								"cateName": "主板",
								"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
								"parentId": 23
							},
							{
								"id": 27,
								"cateName": "显卡",
								"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
								"parentId": 23
							},
							{
								"id": 28,
								"cateName": "硬盘",
								"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
								"parentId": 23
							}
						]
					},
					{
						"id": 29,
						"cateName": "外设产品",
						"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
						"parentId": 16,
						"children": [{
								"id": 30,
								"cateName": "鼠标",
								"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
								"parentId": 29
							},
							{
								"id": 31,
								"cateName": "键盘",
								"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
								"parentId": 29
							},
							{
								"id": 32,
								"cateName": "键鼠套装",
								"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
								"parentId": 29
							}
						]
					}
				]
			},
			{
				"id": 17,
				"cateName": "男装女装",
				"icon": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40",
				"parentId": 0,
				"children": [{
						"id": 33,
						"cateName": "女装",
						"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
						"parentId": 17,
						"children": [{
								"id": 36,
								"cateName": "当季热卖",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 33
							},
							{
								"id": 37,
								"cateName": "新品推荐",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 33
							},
							{
								"id": 38,
								"cateName": "商场同款",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 33
							}
						]
					},
					{
						"id": 34,
						"cateName": "男装",
						"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
						"parentId": 17,
						"children": [{
								"id": 39,
								"cateName": "新品推荐",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 34
							},
							{
								"id": 40,
								"cateName": "T恤",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 34
							},
							{
								"id": 41,
								"cateName": "牛仔裤",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 34
							}
						]
					},
					{
						"id": 35,
						"cateName": "内衣",
						"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
						"parentId": 17,
						"children": [{
								"id": 42,
								"cateName": "文胸",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 35
							},
							{
								"id": 43,
								"cateName": "睡衣/家居服",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 35
							},
							{
								"id": 44,
								"cateName": "女士内裤",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 35
							}
						]
					}
				]
			},
			{
				"id": 2,
				"cateName": "手机",
				"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab956ee82c24bdd83d21bc212aad3eb5.png?thumb=1&w=40&h=40&f=webp&q=90",
				"parentId": 0,
				"children": [{
						"id": 45,
						"cateName": "手机通讯",
						"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
						"parentId": 2,
						"children": [{
								"id": 48,
								"cateName": "手机",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 45
							},
							{
								"id": 49,
								"cateName": "游戏手机",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 45
							},
							{
								"id": 50,
								"cateName": "5G手机",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 45
							}
						]
					},
					{
						"id": 46,
						"cateName": "运营商",
						"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
						"parentId": 2,
						"children": [{
								"id": 51,
								"cateName": "合约机",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 46
							},
							{
								"id": 52,
								"cateName": "手机卡",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 46
							},
							{
								"id": 53,
								"cateName": "宽带",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 46
							}
						]
					},
					{
						"id": 47,
						"cateName": "手机配件",
						"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
						"parentId": 2,
						"children": [{
								"id": 54,
								"cateName": "手机壳",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 47
							},
							{
								"id": 55,
								"cateName": "贴膜",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 47
							},
							{
								"id": 56,
								"cateName": "手机存储卡",
								"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
								"parentId": 47
							}
						]
					}
				]
			},
			{
				"id": 57,
				"cateName": "女鞋/箱包",
				"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
				"parentId": 0
			},
			{
				"id": 58,
				"cateName": "男鞋/运动",
				"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
				"parentId": 0
			},
			{
				"id": 59,
				"cateName": "房产/汽车",
				"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
				"parentId": 0
			},
			{
				"id": 60,
				"cateName": "母婴",
				"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
				"parentId": 0
			},
			{
				"id": 61,
				"cateName": "食品",
				"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
				"parentId": 0
			},
			{
				"id": 62,
				"cateName": "艺术",
				"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
				"parentId": 0
			},
			{
				"id": 63,
				"cateName": "医药保健",
				"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
				"parentId": 0
			},
			{
				"id": 64,
				"cateName": "图书/文娱",
				"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
				"parentId": 0
			},
			{
				"id": 65,
				"cateName": "机票/酒店",
				"icon": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=40&h=40&f=webp&q=90",
				"parentId": 0
			}
		],
		"msg": "ok",
		"code": 0
	}
	console.log(data)
</script>